<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
   .zdy-carousel .container {
      width: 718px;
      height: 303px;
    }
    .container{
      padding: 20px 0 0 0;
    }
    a{
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="box">
<!-- 头部 -->
<div class="header">
  <!-- <div class="header_nav"> -->
    <div class="header_logo">
      <!-- <img src="./img/logo.png" alt=""> -->
    </div>
    <div class="header_search">
      <input type="text">
      <button>
        <a href="./search.html">搜索</a>
        </button>
    </div>
    <div class="login">
      <a href="./userlogin.html">登录</a>
      <a href="./userregistre.html">注册</a>
    </div>
  <!-- </div> -->
</div>
<!-- 导航栏 -->
<div class="zdy-nav">
  <div class="nav-box">
  <!-- 导航栏内8个div -->
  <!-- 作品分类不跳转 -->
  <div>
    <span>作品分类</span>
  </div>
  <!-- 导航中部 -->
  <div>
  <a href="./oeuvre.html">全部作品</a>
  <a href="./ranking list.html">排行榜</a>
  <a href="#">完本</a>
  <a href="#">免费</a>
  <a href="#">作家专区</a>
  <a href="#">客户端</a>
  </div>
  <!-- 导航尾部 -->
  <div>
    <a href="#">页游</a>
  </div>
</div>
</div>
<!-- 主页面 -->
<div class="body">
<!-- 左边作品分类 -->
  <ul class="type-ul">
    <li>
      <a href="./classify1.html">奇幻玄妙</a>
      <a href="./classify1.html">武侠仙侠</a>
    </li>
    <li>
      <a href="./classify1.html">历史军事</a>
      <a href="./classify1.html">都市娱乐</a>
    </li>
    <li>
      
      <a href="./classify1.html">竞技同人</a>
      <a href="./classify1.html">科幻游戏</a>
    </li>
    <li>
      <a href="./classify1.html">悬疑灵异</a>
      <a href="./classify1.html">二次元</a>
    </li>
    <li>
      <a href="./classify1.html">花语女生</a>
      <a href="./oeuvre.html">全部作品</a>
    </li>
  </ul>

<!-- 中间轮播图 -->
<div class="zdy-carousel">
  <div class="container">
    <div class="carousel" slide data-ride="carousel" id="barnner">
      <!-- 图片展示区 -->
      <div class="carousel-inner">
        <!-- carousel-item 是让图片不显示 激活时才显示 -->
        <div class="carousel-item active">
          <img src="./img/banner/1.jpeg" alt="" class="w-100">
        </div>
        <div class="carousel-item">
          <img src="./img/banner/2.jpeg" alt="" class="w-100">
        </div>
        <div class="carousel-item">
          <img src="./img/banner/3.jpeg" alt="" class="w-100">
        </div>
        <div class="carousel-item">
          <img src="./img/banner/4.png" alt="" class="w-100">
        </div>
      </div>
      <!-- 左右切换器 -->
      <a href="#barnner" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#barnner" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
      <!-- 下方控制符区 -->
      <ul class="carousel-indicators">
        <li class="active" data-target="#barnner" data-slide-to="0"></li>
        <li data-target="#barnner" data-slide-to="1"></li>
        <li data-target="#barnner" data-slide-to="2"></li>
        <li data-target="#barnner" data-slide-to="3"></li>
      </ul>
    </div>
  </div>
</div>
<!-- 右咨询栏 -->
<div class="new-rel">
  <h4>热点新闻</h4>
  <p class="rel-name">第三届大湾区杯（深圳）</p>
  <p>
    <b>金奖：</b>
  </p>
  <p>《
    <a href="#">破浪时代</a>
    》作者：人间需要情绪稳定</p>
  <p>
    <b>银奖：</b>
  </p>
  <p>
    《<a href="#">老师快来</a>》 作者：夜独醉
  </p>
  <p>
    《<a href="#">茶滘往事</a>》 作者：李慕江
  </p>
  <p>
    《<a href="#">机缘十五年</a>》作者：山海弯
  </p>
  <p>恭喜以上获奖作家！</p>

  
</div>
</div>
<hr>
<!-- 尾部 -->
<div class="tail">
  <!-- 左边放强烈推荐 -->
  <div class="tail-left">
    <h4>本月推荐</h4>
    <ul class="left-recommend">
      <li>
        [<a href="#" class="left-recommend-type">奇幻</a>]
        <a href="./details.html"class="left-recommend-book">时域领主</a>
        <span>元气小虫</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">玄幻</a>]
        <a href="./details.html"class="left-recommend-book">涿鹿百战</a>
        <span>琐星光</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">玄幻</a>]
        <a href="./details.html"class="left-recommend-book">万道龙神</a>
        <span>苏九叶</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">悬疑</a>]
        <a href="./details.html"class="left-recommend-book">半妖仙祖</a>
        <span>付梓琛</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">悬疑</a>]
        <a href="./details.html"class="left-recommend-book">青空剑尊</a>
        <span>脆脆鲨</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">灵异</a>]
        <a href="./details.html"class="left-recommend-book">行冥</a>
        <span>牧瘣</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">都市</a>]
        <a href="./details.html"class="left-recommend-book">纸黄金</a>
        <span>前昌</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">丽人</a>]
        <a href="./details.html"class="left-recommend-book">走刃</a>
        <span>逸帆轻舟</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">科幻 </a>]
        <a href="./details.html"class="left-recommend-book">极品世子</a>
        <span>不杀刺客</span>
      </li>
      <li>
        [<a href="#" class="left-recommend-type">竞技</a>]
        <a href="./details.html"class="left-recommend-book">刀与王座</a>
        <span> 鱼片02</span>
      </li>
    </ul>
  </div>
  <div class="tail-center">
  <!-- 中间放八本小说介绍 -->
  <div>
  <h4 class="tail-center-tit">编辑推荐</h4>
</div>
<div class="tail-center-content">
    <div class="recommend">
      <div class="rec-img">
        <img src=".\img\novel-img\urban-entertainment\6.jpeg" alt="">
      </div>
      <div>
      <div class="rec-content">
        <h5>重生之工业狂潮</h5>
        <p>天下我有，没成想还要上工、搬砖。重金属、真科技、不小白，浓浓的代入感。</p>
        <div>
          <span>滨海观潮</span>
          <span class="rec-type">异术超能</span>
        </div>
      </div>
      
    </div>
    </div>
    <div class="recommend">
      <div class="rec-img">
        <img src=".\img\novel-img\quadratic-element\1.jpeg" alt="">
      </div>
      <div>
      <div class="rec-content">
        <h5>金币即是正义</h5>
        <p>剑之上，为魔法。
          魔法之上，为权力。
          权力之上，为利益。
          利益的象征，则为金钱。</p>
        <div>
          <span>盘古混沌</span>
          <span class="rec-type">悬疑灵异</span>
        </div>
      </div>
      
    </div>
    </div>
    <div class="recommend">
      <div class="rec-img">
        <img src="./img/2.1.jpg" alt="">
      </div>
      <div>
      <div class="rec-content">
        <h5>明克街13号</h5>
        <p>我家在，明克街13号的茵默莱斯逝者关怀公司。</p>
        <div>
          <span>纯洁滴小龙</span>
          <span class="rec-type">异术超能</span>
        </div>
      </div>
      
    </div>
    </div>
    <div class="recommend">
      <div class="rec-img">
        <img src="./img/2.1.jpg" alt="">
      </div>
      <div>
      <div class="rec-content">
        <h5>明克街13号</h5>
        <p>我家在，明克街13号的茵默莱斯逝者关怀公司。</p>
        <div>
          <span>纯洁滴小龙</span>
          <span class="rec-type">异术超能</span>
        </div>
      </div>
      
    </div>
    </div>
    <div class="recommend">
      <div class="rec-img">
        <img src="./img/2.1.jpg" alt="">
      </div>
      <div>
      <div class="rec-content">
        <h5>明克街13号</h5>
        <p>我家在，明克街13号的茵默莱斯逝者关怀公司。</p>
        <div>
          <span>纯洁滴小龙</span>
          <span class="rec-type">异术超能</span>
        </div>
      </div>
      
    </div>
    </div>
    <div class="recommend">
      <div class="rec-img">
        <img src="./img/2.1.jpg" alt="">
      </div>
      <div>
      <div class="rec-content">
        <h5>明克街13号</h5>
        <p>我家在，明克街13号的茵默莱斯逝者关怀公司。</p>
        <div>
          <span>纯洁滴小龙</span>
          <span class="rec-type">异术超能</span>
        </div>
      </div>
      
    </div>
    </div>
   </div>
  </div>
    
  <!-- 作者介绍 -->
  <div class="tail-right">
    <div>
      <h4>大神俱乐部</h4>
    </div>
    <div class="tail-right-athor">
      <div class="athor">
        <div class="athor-n-i">
        <div class="athor-name">
          <h5>云芨</h5>
          <p>阅文集团白金作家</p>
          <h6>代表作</h6>
        </div>
        <div class="athor-img">
          <img src="./img/author1.jpg" alt="">
        </div>
      </div>
        <div class="athor-dbz">
          <span>一仙难求|仙灵图谱|天命为凰</span>
        </div>
       </div>
      <p class="athor-introduce">阅文集团白金作家，作品恢弘大气的文风，跌宕起伏的仙路征伐，怎一个爽字了得！</p>
    </div>
    <div class="tail-right-athor">
      <div class="athor">
        <div class="athor-n-i">
        <div class="athor-name">
          <h5>陈词懒调</h5>
          <p>阅文集团白金作家</p>
          <h6>代表作</h6>
        </div>
        <div class="athor-img">
          <img src="./img/author2.jpg" alt="">
        </div>
      </div>
        <div class="athor-dbz">
          <span>未来天王|原始战记|回到过去变成猫</span>
        </div>
       </div>
      <p class="athor-introduce">阅文集团白金作家，网络文学知名作家笔力雄厚，作品风格极具特色，实力强劲。</p>
    </div>
  </div>
</div>

</div>
<!-- 页尾区 -->
<div class="foot">
  <div class="footgray">
 <a href="#">关于趣读</a>
 <span>|</span>
 <a href="#">诚聘英才</a>
 <span>|</span>
 <a href="#">商务合作</a>
 <span>|</span>
 <a href="#">法律声明</a>
 <span>|</span>
 <a href="#">帮助中心</a>
 <span>|</span>
 <a href="#">作者投稿</a>
 <span>|</span>
 <a href="#">联系我们</a>
 <span>|</span>
 <a href="#">友情链接</a>
 <span>|</span>
 <a href="#">谨防诈骗</a>
</div>
</div> 
</body>

</html>